<template>
	<view class="detail-container">
		<view v-if="isShow" class="order-btn"
			>
			<button style="flex: 1" @click="handleApprove('refuseApprove')">审核拒绝</button>
			<button style="flex: 1" class="sign-btn" @click="handleApprove('passApprove')">审核通过</button>
		</view>
		<van-tabs @change="changeTab" color="#1152FC" animated :lazy-render="false" :active="active">
			<van-tab :title-style="active == 0 ? 'color: #1152FC': ''" title="装修信息">
				<!-- <ticket-info :ticketDetail="ticketDetail"></ticket-info> -->
				<view class="order-content">
					<view class="content-item">
						<text class="item-name four">申请房屋：</text>
						<view style="word-break:break-all;flex: 1;">{{renovationInfo.projName}}</view>
					</view>
					<view class="content-item">
						<text class="item-name">业主姓名：</text>
						<view style="word-break:break-all;flex: 1;">{{renovationInfo.ownerName}}</view>
						<!-- <text>{{ticketDetail['联系人姓名']}}</text> -->
					</view>
					<view class="content-item">
						<text class="item-name four">联系电话：</text>
						<view style="word-break:break-all;flex: 1;">{{renovationInfo.ownerTel}}</view>
						<!-- <text>{{ticketDetail['联系人电话']}}</text> -->
					</view>
					<view v-if="renovationInfo.fitContent" class="content-item">
						<text class="item-name">装修内容：</text>
						<view style="word-break:break-all;flex: 1;">{{renovationInfo.fitContent}}</view>
						<!-- <text>{{ticketDetail['联系人姓名']}}</text> -->
					</view>
					<view v-if="renovationInfo.area" class="content-item">
						<text class="item-name">装修面积：</text>
						<view style="word-break:break-all;flex: 1;">{{renovationInfo.area + '㎡' }}</view>
						<!-- <text>{{ticketDetail['联系人姓名']}}</text> -->
					</view>
					<view class="content-item">
						<text class="item-name">装修时间：</text>
						<view style="word-break:break-all;flex: 1;">{{renovationInfo.fitTimeStart + '-' +renovationInfo.fitTimeEnd}}</view>
						<!-- <text>{{ticketDetail['联系人姓名']}}</text> -->
					</view>
					<view class="content-item">
						<text class="item-name">申请人：</text>
						<view style="word-break:break-all;flex: 1;">{{renovationInfo.applyPeople}}</view>
						<!-- <text>{{ticketDetail['联系人姓名']}}</text> -->
					</view>
					<view class="content-item">
						<text class="item-name">申请人电话：</text>
						<view style="word-break:break-all;flex: 1;">{{renovationInfo.applyPeopleTel}}</view>
					</view>
					<view class="content-item">
						<text class="item-name">装修单位：</text>
						<view style="word-break:break-all;flex: 1;">{{renovationInfo.fitUnit}}</view>
					</view>
					<view class="content-item">
						<text class="item-name">装修单位负责人：</text>
						<view style="word-break:break-all;flex: 1;">{{renovationInfo.fitManager}}</view>
					</view>
					<view class="content-item">
						<text class="item-name">负责人电话：</text>
						<view style="word-break:break-all;flex: 1;">{{renovationInfo.fitManagerTel}}</view>
					</view>
					
					<view class="content-item">
						<text class="item-name">业主有效证件：</text>
						<imageViewer :imageWidth="220" v-model="renovationInfo.credentials" />
					</view>
					
					<view class="content-img">
						
					</view>
					
					<view
						v-if="ticketDetail['工单状态'] === 'completed' || ticketDetail['工单状态'] === 'completedwithtimeout'">
						<view class="content-item">
							<text class="item-name">处理结果附件：</text>
						</view>
						<view v-if="ticketDetail['处理结果附件']" class="content-img">
							<view class="img-item" v-if="resultFile[0].fileData">
								<van-image @click="previewResult(0)" fit="cover" width="110" height="110"
									:src="resultFile[0].fileData" />
							</view>
							<view class="img-item" v-if="resultFile[1].fileData">
								<van-image @click="previewResult(1)" fit="cover" width="110" height="110"
									:src="resultFile[1].fileData" />
							</view>
							<view class="img-item" v-if="resultFile[2].fileData">
								<van-image @click="previewResult(2)" fit="cover" width="110" height="110"
									:src="resultFile[2].fileData" />
							</view>
						</view>
						<van-empty description="暂无附件" v-else />
					</view>
					<view v-if="ticketDetail['完成时间']" class="content-item">
						<text class="item-name four">完成时间：</text>
						<text>{{ticketDetail['完成时间'] | formatTime}}</text>
					</view>
					<view v-if="ticketDetail['废弃时间']" class="content-item">
						<text class="item-name four">废弃时间：</text>
						<text>{{ticketDetail['废弃时间'] | formatTime}}</text>
					</view>
					<view class="sign-img" v-if="signFile">
						<view class="left-text">业主签字:</view>
						<van-image fit="cover" width="110" height="110" :src="signFile" />
					</view>
				</view>
					
				<button class="accept-ticket" @click="accept" v-if="ticketDetail['工单状态'] == 'unclaimed'">接单</button>
			</van-tab>
			<van-tab :title-style="active == 1 ? 'color: #1152FC': ''" title="审批信息">
				<!-- <lb-picker ref="picker2" mode="selector" :list="handleTypeList" :dataset="{ name: 'label2' }"
					@change="handleChange" @confirm="handleConfirm" @cancel="handleCancel">
				</lb-picker> -->
				<view class="example-body" style="height: 100vh;">
					<approve-step :options="approveStep" active-color="#5094FF"
						:active="approveStep.length-1" direction="column" />
						
				</view>
			</van-tab>
		</van-tabs>
	</view>
</template>

<script>
	import approveStep from '../components/approveStep.vue'
	import assistStep from '@/myComponents/assistStep.vue'
	import LbPicker from '@/components/lb-picker/index.vue'
	import imageViewer from '@/myComponents/imageViewer.vue'
	import {
		previewImg
	} from '@/utils/previewImg'
	import dayjs from "dayjs";
	export default {
		components: {
			LbPicker,
			assistStep,
			imageViewer,
			approveStep
		},
		data() {
			return {
				isShow: false,
				approveStep: [],
				renovationInfo: {},
				ticketStatusObj: this.$type.ticketStatus,
				colorType: this.$type.colorType,
				eventInfo: {},
				isHaveRecord: true,
				districtInfo: {},
				isHaveDistrict: true,
				assignType: this.$type.assignType,
				active: 0,
				statusList: ['completed', 'abandoned', 'completedwithtimeout', 'unclaimed'],
				timerId: '',
				countDown: '',
				handleTypeList: this.$type.handleTypeList,
				originType: this.$type.originType,
				context: null,
				value1: '',
				label1: '',
				tabCurrentIndex: 0,
				resultUrl: '../../static/icon/8.png',
				ticketId: null,
				ticketDetail: {},
				params: {
					id: 48,
				},
				
				ticketType: this.$type.ticketType,
				params1: {
					recordId: null,
					object: "fitment"
				},
				params2: {
					nodeId: null,
					unitId: uni.getStorageSync('currentUnitId'),
					workerId: uni.getStorageSync('userInfo').id,
					status: null
				},
				operatorList: [],
				ticketFile: {},
				file: {
					fileName: null,
					fileData: null
				},
				signFile: '',
				imgLength: 0,
				imgItem: [],
				resultItem: [],
				resultFile: {},
				接单人id: null,
				renovationTicket: null,
				startTime: null,
				endTime: null,
				checkTicket: null,
				loading: true,
				params3: {
					id: null,
					接单人id: null,
					操作原因: null
				},
				url: '',
				params4: {
					code: null
				},
				addressUrl: '',
				assistStep: [],
				index: null,
				childIndex: null
			}
		},
		onLoad(options) {
			// this.ticketId = +options.id
			this.params.id = +options.id
			this.params1.recordId = +options.id
			this.getDetail()
			this.getApproveStep()
			// this.getAssistStep()
		},
		onShow() {

		},
		methods: {
			handleApprove(type) {
				let obj = {
					nodeId: this.approveStep[this.index].id,
					workerId: uni.getStorageSync('userInfo').id,
					status: type
				}
				uni.navigateTo({
					url: '/renovationSystem/approve/approve?obj=' + JSON.stringify(obj)
				})
			},
			getDetail() {
				uni.showLoading()
					this.$http.post('/fitment/apply/info', this.params).then(res => {
						if (res.code === 10000) {
							console.log(res)
							res.data.fitTimeStart = res.data.fitTimeStart && dayjs(res.data.fitTimeStart).format('YYYY-MM-DD HH:mm:ss')
							res.data.fitTimeEnd = res.data.fitTimeEnd && dayjs(res.data.fitTimeEnd).format('YYYY-MM-DD HH:mm:ss')
							this.renovationInfo = res.data
						}
					})
		
			},
			getApproveStep() {
				this.$http.post('/flow/common/list', this.params1).then(res => {
					if (res.code === 10000) {
						console.log(res)
						let id = uni.getStorageSync('userInfo').id
						this.approveStep = res.data.list[0].withNodes || []
						for(let i = 0; i < this.approveStep.length; i++) {
							for(let j = 0; j < this.approveStep[i].withNodeWorker.length; j++) {
								let node = this.approveStep[i].withNodeWorker[j]
								if(node.workerId === id && node.nodeType === 1) {
									this.index = i
									this.childIndex = j
								}
								let that = this
								node.imgList = []
								node.accessory.split(',').forEach(item => {
									if (item) {
										that.$funs.downloadImage(item, (res) => {
											node.imgList.push(res.fileData)
										})
									}
								})
							}
						}
						if(this.index !== null && this.childIndex !== null){
							let newStep = this.approveStep.slice(0, this.index)
							let flag = newStep.every(item => item.status === 'passApprove')
							let flag1 = ['waitApprove', 'approveing'].includes(this.approveStep[this.index].status) 
							let flag2 = this.approveStep[this.index].withNodeWorker[this.childIndex].status === 'waitApprove'
							this.isShow = flag && flag1 && flag2  
						}
					}
				})
			},
			changeTab(name, title) {
				this.active = name.target.index
			},
			handleCancel(e) {
				uni.showTabBar({
					animation: true
				})
				console.log('cancel::', e)
			},
			downloadSign(id) {
				this.$http.post('common/file/download', {
					id
				}).then(res => {
					console.log(res.data.fileData)
					if (res.code === 10000) {
						this.signFile = res.data.fileData
					}
				})
			},
			downloadResult(id, index) {
				// this.imgLength++
				this.$http.post('common/file/download', {
					id
				}).then(res => {
					console.log(res)
					if (res.code === 10000) {
						this.imgItem.push(res.data.fileData)
						this.resultFile[index] = {}
						this.resultFile[index].fileData = res.data.fileData
						console.log(this.resultFile)
					}
				})
			},
			downloadFile(id, index) {
				this.imgLength++
				this.$http.post('common/file/download', {
					id
				}).then(res => {
					console.log(res)
					if (res.code === 10000) {
						this.imgItem.push(res.data.fileData)
						this.ticketFile[index] = {}
						this.ticketFile[index].fileData = res.data.fileData
						console.log(this.ticketFile)
					}
				})
			},
			previewImage(index) {
				// console.log(index)
				let previewList = []
				if (this.ticketFile[0]) {
					previewList.push(this.ticketFile[0].fileData)
				}
				if (this.ticketFile[1]) {
					previewList.push(this.ticketFile[1].fileData)
				}
				if (this.ticketFile[2]) {
					previewList.push(this.ticketFile[2].fileData)
				}
				previewImg(previewList, index)
			},
			previewResult(index) {
				let previewList = []
				if (this.resultFile[0]) {
					previewList.push(this.resultFile[0].fileData)
				}
				if (this.resultFile[1]) {
					previewList.push(this.resultFile[1].fileData)
				}
				if (this.resultFile[2]) {
					previewList.push(this.resultFile[2].fileData)
				}
				previewImg(previewList, index)
			}
		}
	}
</script>

<style lang="scss">
	@import  '../../style/detail.scss';
</style>